<template>
  <el-dialog
    v-model="localProps.dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    title="修改积分规则"
    width="500"
  >
    <el-form
      style="max-width: 600px"
      label-width="auto"
      status-icon
    >
      <el-form-item
        label="规则名称"
      >
        {{ localProps.name }}
      </el-form-item>
      <el-form-item
        label="启用状态"
      >
        <el-switch
          v-model="localProps.enable"
        />
      </el-form-item>
      <el-input-number
        v-model="localProps.point"
        label="积分"
        :min="0"
      />
    </el-form>
    <div class="Button">
      <el-button
        type="primary"
        @click="changeShow"
      >
        取消
      </el-button>
      <el-button
        type="success"
        @click="submit"
      >
        提交
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import * as api from '@/api/point/rule'

const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  },
  name: {
    type: String,
    default: ''
  },
  enable: {
    type: Number,
    default: 0
  },
  point: {
    type: Number,
    default: 0
  }
})

// 向父组件发送事件
const emit = defineEmits(['changeShow'])

function changeShow () {
  emit('changeShow', false)
}

// 定义本地数据
const localProps = reactive({
  dialogFormVisible: false,
  name: '',
  enable: 0,
  point: 0
})

// 按照父组件的值替换本地值
watchEffect(() => {
  localProps.dialogFormVisible = props.dialogFormVisible
  localProps.name = props.name
  localProps.enable = props.enable
  localProps.point = props.point
})

const submit = () => {
  api.updateRule({
    name: localProps.name,
    enable: localProps.enable ? 1 : 0,
    point: localProps.point
  }).then(() => {
    changeShow()
  }).catch(() => {
    ElMessage.error('修改失败')
    changeShow()
  })
}

</script>

<style scoped>
  .Button {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
</style>
